<template>
  <article>
    <div
      class="item"
      v-show="!isRoam"
      v-for="(item, index) in items"
      :key="index"
    >
      <div
        class="item-body"
        :style="{
          '--width': item.flag ? '0' : item.width,
          '--height': item.flag ? '0' : item.height
        }"
      >
        <div class="item-body-title">
          {{ item.title }}
          <CloseOutlined @click="toggle(index)" />
        </div>
        <div class="item-body-content">
          <template v-if="item.type == 'device'">
            <BookSearchTree @updateCurrent="updateCurrent" />
          </template>

          <!-- 视频装置 -->
          <template v-if="item.type == 'video'">
            <a-input
              v-model:value.trim="cameraValue"
              placeholder="请输入"
              v-filter-special-chars
              class="mb-[0.5rem]"
            >
              <template #suffix>
                <SearchOutlined class="ml-2 cursor-pointer" />
              </template>
            </a-input>
            {{ cameraData.length }}
            <!--  @click="search('camera')" -->
            <div class="video common">
              <div
                v-for="(item, index) in cameraData"
                :key="index"
                class="common-item"
                @click="handleClickCamera(item)"
              >
                {{ index + 1 }}. {{ item.name }}
              </div>
            </div>
          </template>

          <!-- 标签控制 -->
          <!-- <template v-if="item.type == 'control'">
            <div
              class="control"
              v-for="(item, index) in labellist"
              :key="index"
            >
              {{ item.labelName }}：
              <a-switch
                v-model:checked="item.isOpen"
                :checkedValue="1"
                :unCheckedValue="0"
                @change="onChange(item)"
              />
            </div>
          </template> -->

          <!-- 漫游巡视 -->
          <template v-if="item.type == 'roam'">
            <a-input
              v-model:value.trim="roamValue"
              placeholder="请输入"
              v-filter-special-chars
              class="mb-[0.5rem]"
            >
              <template #suffix>
                <SearchOutlined
                  class="ml-2 cursor-pointer"
                  @click="search('roam')"
                />
              </template>
            </a-input>
            <div class="common">
              <div
                v-for="(item, index) in taskList"
                :key="index"
                class="common-item"
                @click="handleClickRoam(item)"
              >
                {{ index + 1 }}. {{ item.name }}
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="item-label" @click="toggle(index)">
        <svg-icon :name="item.icon"></svg-icon>
        {{ item.title }}
      </div>
    </div>
    <div v-show="isRoam" class="btns">
      <svg-icon
        name="pause-outlined"
        @click="handlePause"
        v-if="isPause"
      ></svg-icon>
      <svg-icon v-else name="begin-outlined" @click="handleBegin"></svg-icon>
    </div>
    <div class="home" @click="reset">
      <svg-icon name="home-home"></svg-icon>
    </div>
  </article>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// import { message } from 'ant-design-vue'
import { CloseOutlined, SearchOutlined } from '@ant-design/icons-vue'

import BookSearchTree from '@/components/tree/BookSearchTree.vue'
import {
  patrolJobMultiTerminal,
  cameraList,
  pointVOList,
  labelList
  // editLabel
} from './serve.api'

const taskList = ref([])
const cameraData = ref([])
const current = ref()

const cameraValue = ref('')
const roamValue = ref('')

const isRoam = ref(false)
const isPause = ref(true)

const emit = defineEmits(['reset'])

const reset = () => emit('reset')

const items = ref([
  {
    title: '设备台账',
    type: 'device',
    flag: true,
    icon: 'home-ledger',
    height: '20rem',
    width: '18rem'
  },
  {
    title: '视频装置',
    type: 'video',
    flag: true,
    icon: 'home-video',
    height: '20rem',
    width: '18rem'
  },
  // {
  //   title: '标签控制',
  //   type: 'control',
  //   flag: true,
  //   icon: 'home-label',
  //   height: '10rem',
  //   width: '13rem'
  // },
  {
    title: '漫游巡视',
    type: 'roam',
    flag: true,
    icon: 'home-roam',
    height: '20rem',
    width: '18rem'
  }
])

const labellist = ref([
  {
    title: '设备标签',
    checked: false
  },
  {
    title: '视频装置标签',
    checked: false
  },
  {
    title: '区域标签',
    checked: false
  }
])

function toggle(index) {
  current.value = index
  items.value.forEach((item, i) => {
    if (i === index) {
      item.flag = !item.flag
    } else {
      item.flag = true
    }
  })
}

function handleClickCamera(item) {
  emit('camera', item)
  toggle(current.value)
}

function handleClickRoam(item) {
  pointVOList({ jobId: item.id }).then((res) => {
    emit('roam', res)
    toggle(current.value)
    isRoam.value = true
  })
}

const updateCurrent = (item) => {
  emit('device', item)
  toggle(current.value)
}

function search(type) {
  if (type === 'camera') {
    console.log(cameraData.value)
    if (cameraValue.value) {
      cameraData.value = cameraData.value.filter((item) =>
        item.name.includes(cameraValue.value)
      )
    } else {
      initCamera()
    }
  }

  if (type === 'roam') {
    console.log(roamValue.value)
    if (roamValue.value) {
      taskList.value = taskList.value.filter((item) =>
        item.name.includes(roamValue.value)
      )
    } else {
      initJob()
    }
  }
}

async function initCamera() {
  cameraData.value = await cameraList()
  console.log(cameraData.value, '====cameraData.value')
}

async function initJob() {
  taskList.value = await patrolJobMultiTerminal()
}

// function onChange(item) {
//   editLabel(item).then(() => {
//     message.success('操作成功')
//     emit('changeLabel', item)
//   })
// }

function handlePause() {
  emit('pause')
  isPause.value = !isPause.value
}

function handleBegin() {
  emit('begin')
  isPause.value = !isPause.value
}

function roamEnd() {
  isRoam.value = false
  console.log('========Article漫游结束=======')
}

function resetAngle() {
  console.log('重置视场角')
  isRoam.value = false
}

onMounted(() => {
  initJob()
  initCamera()
  labelList().then((res) => {
    console.log(res, '=====标签列表=====')
    labellist.value = res
  })
})

defineExpose({ roamEnd, resetAngle })
</script>

<style lang="less" scoped>
article {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  z-index: 1;
  display: flex;

  .item {
    position: relative;
    cursor: pointer;

    &-body {
      position: absolute;
      right: 0;
      bottom: 4.5rem;
      overflow: hidden;
      width: var(--width);
      height: var(--height);
      background-color: #fff;
      border-radius: 0.5rem;
      transition: height 0.3s ease;

      &-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.625rem 1.5rem;
        font-weight: bold;

        .anticon-close:hover {
          color: #00796a;
          cursor: pointer;
        }
      }

      &-content {
        display: flex;
        padding: 0 1.5rem;
        height: calc(var(--height) - 2.375rem);
        flex-direction: column;

        .main {
          overflow: hidden scroll;
          scrollbar-width: none;
          flex: 1;
        }

        .common {
          overflow: hidden scroll;
          scrollbar-width: none;

          &-item {
            line-height: 2rem;
            padding-left: 0.75rem;
            border-radius: 0.125rem;
            border-left: 0.125rem solid transparent;

            &:hover {
              background-color: rgb(0 121 106 / 16%);
              border-left: 0.125rem solid #00796a;
            }
          }
        }

        .control {
          text-align: right;

          &:not(:last-child) {
            margin-bottom: 0.625rem;
          }
        }
      }
    }

    &-label {
      display: flex;
      align-items: center;
      padding: 0.5rem 1rem;
      font-weight: 800;
      background: rgb(240 240 240);
      border: 0.0625rem solid #fff;
      border-radius: 0.5rem;

      :deep(.svg-icon) {
        margin-right: 0.5rem;
        width: 2rem;
        height: 2rem;
      }

      &:hover {
        color: #fff;
        background-color: #00796a;
        border: 0.0625rem solid #00796a;
      }
    }

    // &:hover,
    // &:hover a {
    //   color: #f00;
    //   background-color: #0091ff;
    // }

    // &:hover .item-body {
    //   display: block;
    // }
  }

  > .item:not(:first-child) {
    margin-left: 1.5rem;
  }

  .home {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -1em;
    margin-left: 1.5rem;
    width: 5rem;
    height: 5rem;
    background: rgb(240 240 240);
    border: 0.0625rem solid #fff;
    border-radius: 50%;
    cursor: pointer;

    :deep(.svg-icon) {
      width: 2.5rem;
      height: 2.5rem;
    }
  }
}

.btns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -1em;
  width: 5rem;
  height: 5rem;
  background: rgb(240 240 240);
  border: 0.0625rem solid #fff;
  border-radius: 50%;

  &:hover {
    color: #00796a;
    cursor: pointer;
  }

  :deep(.svg-icon) {
    width: 2rem;
    height: 2rem;
  }
}
</style>
